<template>
    <el-form ref="form" label-width="80px" label-position="left">
        <el-form-item label="SKU名称">
            <el-input placeholder="请输入SKU名称" v-model="skuParams.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input placeholder="请输入价格(元)" type="number" v-model="skuParams.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(克/g)">
            <el-input placeholder="请输入重量(克/g)" v-model="skuParams.weight"></el-input>
        </el-form-item>
        <el-form-item label="SKU描述">
            <el-input placeholder="请输入SKU描述" type="textarea" v-model="skuParams.skuDesc"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form label-width="80px" inline>
                <el-form-item :label="item.attrName" v-for="(item, index) in attrArr" :key="item.id">
                    <el-select placeholder="请选择属性值" style="width: 200px">
                        <el-option v-for="(attrValue, index) in item.attrValueList" :key="attrValue.id"
                            :label="attrValue.valueName" :value="`${item.id}:${attrValue.id}`">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form label-width="50px" inline>
                <el-form-item :label="item.saleAttrName" v-for="(item, index) in saleArr" :key="item.id">
                    <el-select placeholder="请选择属性值" style="width: 200px" v-model="item.saleIdAndValueId">
                        <el-option v-for="(saleAttrValue, index) in item.spuSaleAttrValueList" :key="saleAttrValue.id"
                            :label="saleAttrValue.saleAttrValueName" :value="`${item.id}:${saleAttrValue.id}`">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table style="width: 100%" border :data="imgArr" ref="table">
                <el-table-column type="selection" width="100px" align="center"></el-table-column>
                <el-table-column prop="prop" label="图片" width="350px">
                    <template #="{ row, $index }">
                        <el-image style="width: 100px; height: 100px" :src="row.imgUrl" :fit="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="prop" label="名称"></el-table-column>
                <el-table-column prop="prop" label="操作">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" @click="handler(row)">设为默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item label="">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="defacult" @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue';
    import { reqAttr } from '@/api/product/attribute';
    import { reqSpuImageList, reqSpuHasSaleAttr, reqAddSku } from '@/api/product/spu';
    import { SkuData } from '@/api/product/spu/type';
    import { ElMessage } from 'element-plus';
    // 平台属性
    const attrArr = ref<any>([])
    // 销售属性
    const saleArr = ref<any>([])
    // 照片墙
    const imgArr = ref<any>([])

    const table = ref<any>()

    const skuParams = reactive<SkuData>({
        category3Id: '',
        spuId: '',  // SPU Id
        tmId: '', // 品牌 Id
        // v-model 收集
        skuName: ' ',
        price: '',
        weight: '',
        skuDesc: '',
        skuAttrValueList: [
            // {
            //     attrId: '',
            //     valueId: ''
            // }
        ],
        skuSaleAttrValueList: [
            // {
            //     saleAttrId: '',
            //     saleAttrValueId: ''
            // }
        ],
        skuDefaultImg: ''
    })

    // 自定义事件的方法
    let $emit = defineEmits(['changeScene'])

    const cancel = () => {
        $emit("changeScene", { flag: 0, params: '' })
    }

    const save = async () => {
        console.log('保存')

        // 销售属性
        skuParams.skuSaleAttrValueList = saleArr.value.reduce((prev: any, next: any) => {
            if (next.saleIdAndValueId) {
                let [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(':')
                prev.push({
                    saleAttrId, saleAttrValueId
                })
            }
            return prev
        }, [])

        // 平台属性
        skuParams.skuAttrValueList = attrArr.value.reduce((prev: any, next: any) => {
            console.log('项目接口有问题，因此该项目无平台属性')
            if (next.attrIdAndValueId) {
                let [attrId, valueId] = next.attrIdAndValueId.split(':')
                // console.log(attrId, valueId)
                prev.push({
                    attrId, valueId
                })
            }
            return prev
        }, [])

        // 发请求
        let res: any = await reqAddSku(skuParams)

        // 成功or失败
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '添加SKU成功'
            })
            $emit('changeScene', { flag: 0, params: '' })
        } else {
            ElMessage({
                type: 'error',
                message: '添加SKU失败'
            })
        }
    }

    // 当前子组件的方法对外暴露
    const initSkuData = async (c1Id: number | string, c2Id: number | string, spu: any) => {
        skuParams.category3Id = spu.category3Id
        skuParams.spuId = spu.id
        skuParams.tmId = spu.tmId

        // let res: any = await reqAttr(c1Id, c2Id, spu.category3Id)
        let res1: any = await reqSpuHasSaleAttr(spu.id)
        let res2: any = await reqSpuImageList(spu.id)

        // attrArr.value = res.data
        saleArr.value = res1.data
        imgArr.value = res2.data


        // console.log(spu, attrArr.value, saleArr.value, imgArr.value)
        console.log(spu)
    }

    const handler = (row: any) => {
        console.log(table.value)
        // 遍历
        // imgArr.value.forEach((item: any) => {
        //     table.value.toggleRowSelection(item, false)
        // });
        // 不需遍历
        table.value.clearSelection()
        // 勾选☑
        table.value.toggleRowSelection(row, true)
        skuParams.skuDefaultImg = row.imgUrl
    }

    defineExpose({
        initSkuData
    })
</script>

<style scoped></style>